<template>
  <div class="box">
        <el-container class="cont">
        <el-header class="header">
          <div class="header-avatar">
            <!-- <img src="../assets/logo1.png" alt="Avatar" class="avatar"> -->
            <p class="company-name">中移OCR项目</p>
          </div>
        </el-header>
        <el-container>

          <el-aside class="aside" >

            <el-row class="tac">
  <el-col :span="24">
    <el-menu
      router
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>OCR</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item   index="test"
          ><i class="el-icon-folder-add"></i>扫描件导入</el-menu-item>
          <el-menu-item   index="text"
          ><i class="el-icon-search"></i>文档查询</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">模块B</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">模块C</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-col>
</el-row>
          </el-aside>

          <el-main class="main">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>

  </div>
</template>

<script>


export default {
  data() {
    return {};
  },
  methods: {
  
    handleOpen(key, keyPath) {
      console.log('Menu item opened:', key, keyPath);
      
    },
    handleClose(key, keyPath) {
      console.log('Menu item closed:', key, keyPath);
    
    },
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); 

.company-name {
  color: #333; 
  font-family: 'Roboto', sans-serif; 
  font-size: 28px; 
  font-weight: 400; 
  line-height: 1.5; 
  letter-spacing: 0.05em; 
  text-align: center; 
}

.box {
  position: relative;
}

.cont {
  width: 100%;
  height: 950px;
}




.main {
  background-color: transparent;
  width: 700px;
  height: 800px;
}

.el-aside {
    height: calc(100vh - 60px); 
    overflow-y: auto; 
    margin-top: 20px;
  }


.header {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: initial;
  height: 120px; 
  border-radius: 10px 10px 0 0; 
  overflow: hidden; 
  background-color: rgb(69, 139, 116); 
  display: flex;
  justify-content:  center;
  align-items: center;
  padding: 0 20px;
}



.company-name {
  font-size: 36px; 
  color: white; 
  font-family: 'Roboto', sans-serif; 
  font-weight: 400; 
  line-height: 1.5; 
  letter-spacing: 0.05em; 
  text-align: center; 
}

.custom-menu .el-menu-item,
  .custom-menu .el-submenu__title {
    transition: all 0.3s;
  }

.header-avatar {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.custom-menu {
  max-width: 180px;
}
</style>